<template>
  <div class="setting-dialog-mask" @click.self="$emit('close')">
    <div class="setting-dialog">
      <div class="setting-header">
        <svg class="back-arrow" viewBox="0 0 24 43" @click="$emit('close')">
          <path d="M20 2 L4 21.5 L20 41" stroke="#222" stroke-width="4" fill="none" stroke-linecap="round"/>
        </svg>
        <span class="setting-title">设置</span>
      </div>
      <div class="setting-group">
        <div class="setting-item" v-for="item in list1" :key="item.text">
          <span class="icon-wrap"><svg class="icon-svg"><use :xlink:href="item.icon"></use></svg></span>
          <span class="setting-text">{{ item.text }}</span>
          <svg class="arrow-svg"><use xlink:href="#icon-arrow-right"></use></svg>
        </div>
      </div>
      <div class="setting-group">
        <div class="setting-item" v-for="item in list2" :key="item.text" @click="handleItemClick(item)">
          <span class="icon-wrap"><svg class="icon-svg"><use :xlink:href="item.icon"></use></svg></span>
          <span class="setting-text">{{ item.text }}</span>
          <span v-if="item.extra" class="setting-extra">{{ item.extra }}</span>
          <svg class="arrow-svg"><use xlink:href="#icon-arrow-right"></use></svg>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SettingDialog',
  data() {
    return {
      list1: [
        { icon: '#icon-user', text: '账号与安全' },
        { icon: '#icon-setting', text: '通用设置' },
        { icon: '#icon-bell', text: '通知设置' },
        { icon: '#icon-lock', text: '隐私设置' }
      ],
      list2: [
        { icon: '#icon-trash', text: '存储空间', extra: '1.32 GB' },
        { icon: '#icon-preference', text: '内容偏好调节' },
        { icon: '#icon-location', text: '收货地址' },
        { icon: '#icon-widget', text: '添加小组件' },
        { icon: '#icon-teen', text: '未成年人模式', extra: '未开启' }
      ]
    }
  },
  methods: {
    handleItemClick(item) {
      if (item.text === '收货地址') {
        this.$emit('close');
        this.$router.push('/setting/address-edit');
      }
    }
  }
}
</script>
<style scoped>
.setting-dialog-mask {
  position: fixed; left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.18); z-index: 9999;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 60px;
}
.setting-dialog {
  width: 500px; background: #fafafa; border-radius: 28px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.10);
  padding: 0 0 32px 0;
}
.setting-header {
  display: flex; align-items: center; justify-content: center;
  height: 80px; position: relative; background: #fafafa;
  border-top-left-radius: 28px; border-top-right-radius: 28px;
}
.back-arrow {
  width: 32px; height: 32px; position: absolute; left: 24px; top: 24px; cursor: pointer;
}
.setting-title {
  font-size: 32px; font-weight: bold; color: #222;
}
.setting-group {
  background: #fff; border-radius: 18px; margin: 24px 24px 0 24px; box-shadow: 0 2px 8px rgba(0,0,0,0.03);
  overflow: hidden;
}
.setting-item {
  display: flex; align-items: center; font-size: 28px; padding: 0 24px; height: 72px;
  border-bottom: 1px solid #f0f0f0; position: relative;
}
.setting-item:last-child { border-bottom: none; }
.icon-wrap {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; margin-right: 18px;
}
.icon-svg {
  width: 32px; height: 32px; fill: none; stroke: #222; stroke-width: 2;
}
.setting-text {
  font-size: 28px; color: #222; flex: 1;
}
.setting-extra {
  color: #bbb; font-size: 24px; margin-right: 12px;
}
.arrow-svg {
  width: 22px; height: 22px; fill: none; stroke: #bbb; stroke-width: 2;
}
</style> 